
<!-- shooting_game/frontend/index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>校园创意工作室</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
  <link href="https://fonts.loli.net/css?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/animation.css">
  <style>
    body {
      font-family: 'Ma Shan Zheng', cursive;
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      color: #333;
    }
    .campus-bg {
      background-image: url('images/campus-bg.jpg');
      background-size: cover;
      background-position: center;
    }
    .chalkboard {
      background-image: url('images/chalkboard.png');
      background-size: cover;
      color: white;
    }
    .notebook-icon {
      width: 40px;
      height: 40px;
      background-image: url('images/notebook-icon.png');
      background-size: contain;
      background-repeat: no-repeat;
    }
    .nav-item:hover {
      transform: translateY(-3px);
      text-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    .work-card:hover {
      transform: scale(1.05);
      box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }
  </style>
</head>
<body>
  <!-- 粒子背景 -->
  <div id="particles-js" class="fixed inset-0 z-0"></div>

  <!-- 导航栏 -->
  <nav class="relative z-10 bg-white bg-opacity-90 shadow-md">
    <div class="container mx-auto px-6 py-4">
      <div class="flex items-center justify-between">
        <div class="text-2xl font-bold text-pink-500">🎨 校园创意社</div>
        <div class="hidden md:flex space-x-8">
          <a href="#" class="nav-item transition duration-300 text-blue-600 font-medium">🏠 首页</a>
          <a href="works.html" class="nav-item transition duration-300 text-green-600 font-medium">📚 作品集</a>
          <a href="about.html" class="nav-item transition duration-300 text-purple-600 font-medium">👨‍🎓 关于我</a>
          <a href="contact.html" class="nav-item transition duration-300 text-yellow-600 font-medium">📮 联系我</a>
        </div>
        <button class="md:hidden focus:outline-none">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
        </button>
      </div>
    </div>
  </nav>

  <!-- 主内容区 -->
  <main class="relative z-10">
    <!-- 欢迎横幅 -->
    <section class="campus-bg py-20 px-4 text-center">
      <h1 class="text-4xl md:text-6xl font-bold text-white drop-shadow-lg animate-bounce">欢迎来到创意天地</h1>
      <p class="mt-6 text-xl text-white max-w-2xl mx-auto">这里是梦想开始的地方，用创意点亮校园生活 ✨</p>
      <button class="mt-8 px-8 py-3 bg-pink-500 text-white rounded-full font-bold hover:bg-pink-600 transition duration-300 shadow-lg">
        了解我们
      </button>
    </section>

    <!-- 作品展示 -->
    <section class="py-16 bg-white">
      <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center mb-12 text-blue-600 flex items-center justify-center">
          <span class="notebook-icon mr-3"></span> 精选作品
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <!-- 作品卡片1 -->
          <div class="work-card bg-gradient-to-br from-yellow-100 to-yellow-200 p-6 rounded-xl shadow-md transition duration-300">
            <div class="h-48 bg-blue-100 rounded-lg mb-4 flex items-center justify-center">
              <span class="text-6xl">🎨</span>
            </div>
            <h3 class="text-xl font-bold text-gray-800">校园插画集</h3>
            <p class="mt-2 text-gray-600">用画笔记录校园生活的美好瞬间</p>
            <button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded-full text-sm hover:bg-blue-600 transition duration-300">
              查看详情
            </button>
          </div>
          
          <!-- 作品卡片2 -->
          <div class="work-card bg-gradient-to-br from-green-100 to-green-200 p-6 rounded-xl shadow-md transition duration-300">
            <div class="h-48 bg-purple-100 rounded-lg mb-4 flex items-center justify-center">
              <span class="text-6xl">📱</span>
            </div>
            <h3 class="text-xl font-bold text-gray-800">校园APP设计</h3>
            <p class="mt-2 text-gray-600">为校园生活量身定制的移动应用</p>
            <button class="mt-4 px-4 py-2 bg-green-500 text-white rounded-full text-sm hover:bg-green-600 transition duration-300">
              查看详情
            </button>
          </div>
          
          <!-- 作品卡片3 -->
          <div class="work-card bg-gradient-to-br from-purple-100 to-purple-200 p-6 rounded-xl shadow-md transition duration-300">
            <div class="h-48 bg-pink-100 rounded-lg mb-4 flex items-center justify-center">
              <span class="text-6xl">🎥</span>
            </div>
            <h3 class="text-xl font-bold text-gray-800">校园微电影</h3>
            <p class="mt-2 text-gray-600">记录青春故事的短片作品</p>
            <button class="mt-4 px-4 py-2 bg-purple-500 text-white rounded-full text-sm hover:bg-purple-600 transition duration-300">
              查看详情
            </button>
          </div>
        </div>
        <div class="text-center mt-10">
          <a href="works.html" class="inline-block px-6 py-3 border-2 border-blue-500 text-blue-500 rounded-full font-bold hover:bg-blue-500 hover:text-white transition duration-300">
            浏览更多作品 →
          </a>
        </div>
      </div>
    </section>

    <!-- 个人介绍 -->
    <section class="py-16 chalkboard">
      <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center mb-12 text-white">👨‍🎓 关于创作者</h2>
        <div class="max-w-4xl mx-auto bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm p-8 rounded-xl">
          <div class="flex flex-col md:flex-row items-center">
            <div class="md:w-1/3 mb-6 md:mb-0">
              <div class="w-48 h-48 mx-auto rounded-full bg-gradient-to-r from-pink-500 to-yellow-500 flex items-center justify-center text-6xl">
                🎨
              </div>
            </div>
            <div class="md:w-2/3 md:pl-10">
              <h3 class="text-2xl font-bold text-yellow-300 mb-4">张小明 - 创意总监</h3>
              <p class="text-white mb-4 leading-relaxed">
                毕业于XX大学艺术学院，热爱一切与创意相关的事物。从校园时期就开始组建创意团队，致力于将艺术与技术完美结合。
              </p>
              <p class="text-white mb-6 leading-relaxed">
                擅长插画设计、UI/UX设计、视频制作等多个领域，带领团队完成过多个校园创意项目。
              </p>
              <a href="about.html" class="inline-block px-6 py-2 bg-yellow-500 text-gray-800 rounded-full font-bold hover:bg-yellow-400 transition duration-300">
                了解更多
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 特色服务 -->
    <section class="py-16 bg-white">
      <div class="container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center mb-12 text-pink-600">🌈 我们的服务</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div class="bg-gradient-to-br from-blue-50 to-blue-100 p-6 rounded-xl shadow-sm text-center">
            <div class="w-16 h-16 mx-auto mb-4 bg-blue-500 rounded-full flex items-center justify-center text-2xl text-white">🖌️</div>
            <h3 class="text-xl font-bold text-blue-600 mb-3">插画设计</h3>
            <p class="text-gray-600">为校园活动、社团定制专属插画</p>
          </div>
          <div class="bg-gradient-to-br from-green-50 to-green-100 p-6 rounded-xl shadow-sm text-center">
            <div class="w-16 h-16 mx-auto mb-4 bg-green-500 rounded-full flex items-center justify-center text-2xl text-white">📱</div>
            <h3 class="text-xl font-bold text-green-600 mb-3">APP设计</h3>
            <p class="text-gray-600">打造校园专属的移动应用体验</p>
          </div>
          <div class="bg-gradient-to-br from-purple-50 to-purple-100 p-6 rounded-xl shadow-sm text-center">
            <div class="w-16 h-16 mx-auto mb-4 bg-purple-500 rounded-full flex items-center justify-center text-2xl text-white">🎥</div>
            <h3 class="text-xl font-bold text-purple-600 mb-3">视频制作</h3>
            <p class="text-gray-600">记录校园生活的精彩瞬间</p>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="relative z-10 bg-gray-800 text-white py-10">
    <div class="container mx-auto px-4">
      <div class="flex flex-col md:flex-row justify-between items-center">
        <div class="mb-6 md:mb-0">
          <div class="text-2xl font-bold text-pink-400">校园创意社</div>
          <p class="mt-2 text-gray-400">用创意点亮校园生活</p>
        </div>
        <div class="flex space-x-6">
          <a href="#" class="text-gray-300 hover:text-white transition duration-300">📱 微信</a>
          <a href="#" class="text-gray-300 hover:text-white transition duration-300">🐦 微博</a>
          <a href="#" class="text-gray-300 hover:text-white transition duration-300">📧 邮箱</a>
          <a href="#" class="text-gray-300 hover:text-white transition duration-300">🎵 B站</a>
        </div>
      </div>
      <div class="mt-8 pt-6 border-t border-gray-700 text-center text-gray-400">
        <p>© 2025 校园创意工作室 版权所有</p>
      </div>
    </div>
  </footer>

  <!-- 脚本 -->
  <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
  <script src="js/main.js"></script>
  <script>
    // 粒子效果初始化
    particlesJS('particles-js', {
      particles: {
        number: { value: 60, density: { enable: true, value_area: 800 } },
        color: { value: "#ffffff" },
        shape: { type: "circle" },
        opacity: { value: 0.5, random: true },
        size: { value: 3, random: true },
        line_linked: { enable: true, distance: 150, color: "#ffffff", opacity: 0.4, width: 1 },
        move: { enable: true, speed: 2, direction: "none", random: true, straight: false, out_mode: "out" }
      }
    });

    // 移动端菜单切换
    document.querySelector('button.md-hidden').addEventListener('click', function() {
      const nav = document.querySelector('.hidden.md\\:flex');
      nav.classList.toggle('hidden');
      nav.classList.toggle('flex');
      nav.classList.toggle('flex-col');
      nav.classList.toggle('absolute');
      nav.classList.toggle('top-16');
      nav.classList.toggle('left-0');
      nav.classList.toggle('right-0');
      nav.classList.toggle('bg-white');
      nav.classList.toggle('p-4');
      nav.classList.toggle('space-y-4');
      nav.classList.toggle('space-x-8');
      nav.classList.toggle('shadow-md');
    });
  </script>
</body>
</html>
